<template>
  <el-card class="column-left"  ref="elCardRefTool">
    <template #header>
      <div class="card-header">
        <span>工具箱</span>
           <svg-icon  class-name="iconfont active"  @click="emits('changeHide')"  icon-class="error"  />
      </div>
    </template>
    <el-row class="tool-header">
      <svg-icon
          v-for="(item, index) in leftTool"
          class-name="iconfont"
          @click="handleTool(index)"
          :key="item.id"
          :title="item.label"
          :icon-class="item.icon"
      />
    </el-row>
    <div class="server-list" @contextmenu="handleContextMenu">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="User" name="frist"  ><tab1 /></el-tab-pane>
        <el-tab-pane label="Config" name="second"  ><tab2 /></el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
  <ContextMenu
    :menuItems="componentAMenuItems"
     v-model:visible="menuFlag"
    ref="contextMenuRef"
  />
</template>

<script setup>
import { nextTick } from "vue";
import ContextMenu from "../common/ContextMenu.vue";
import tab1 from './StyleEdit/tab1.vue';
import tab2 from './StyleEdit/tab2.vue';
const emits = defineEmits(["changeHide"]);
const menuFlag = ref(false);
const contextMenuRef = ref(null);
const activeName = ref('frist');
const componentAMenuItemsFun =()=>{
  alert('点击了')
}
//右键列表菜单
const componentAMenuItems = [
  { label: "菜单项 1",cb:componentAMenuItemsFun, icon:'huanjingshezhi', },
  { label: "菜单项 2", cb:componentAMenuItemsFun, icon:'huanjingshezhi',},
];

//左侧工具栏状态
const leftToolStatus = ref(-1);
//左侧工具栏
const leftTool = [{
        id: 1,
        icon: "peitujiancha",
        label:"配图检查"
    },
    {
        id: 2,
        icon: "jisuanji",
        label:"计算机"
    },
];
//左侧树数据
const data = ref([
  {
    label: "默认 one 1",
    children: [
      {
        label: "默认 two 1-1",
        children: [
          {
            label: "默认 three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 2",
    children: [
      {
        label: "默认 two 2-1",
        children: [
          {
            label: "默认 three 2-1-1",
          },
        ],
      },
      {
        label: "默认 two 2-2",
        children: [
          {
            label: "默认 three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 3",
    children: [
      {
        label: "默认 two 3-1",
        children: [
          {
            label: "默认 three 3-1-1",
          },
        ],
      },
      {
        label: "默认 two 3-2",
        children: [
          {
            label: "默认 three 3-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 3",
    children: [
      {
        label: "默认 two 3-1",
        children: [
          {
            label: "默认 three 3-1-1",
          },
        ],
      },
      {
        label: "默认 two 3-2",
        children: [
          {
            label: "默认 three 3-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 3",
    children: [
      {
        label: "默认 two 3-1",
        children: [
          {
            label: "默认 three 3-1-1",
          },
        ],
      },
      {
        label: "默认 two 3-2",
        children: [
          {
            label: "默认 three 3-2-1",
          },
        ],
      },
    ],
  },
]);
const defaultProps = {
  children: "children",
  label: "label",
};

//获取鼠标位置
const handleContextMenu = (event) => {
  // 阻止默认的右键菜单行为
  event.preventDefault();
  // 获取右键菜单组件实例并设置其显示位置为鼠标点击位置
  const context = contextMenuRef.value;
  menuFlag.value = true;
  let x = event.clientX;
  let y = event.clientY;

  // 获取页面可视区域的宽度和高度
  const pageWidth = document.documentElement.clientWidth;
  const pageHeight = document.documentElement.clientHeight;
  nextTick(() => {
    // 获取右键菜单自身的宽度和高度（这里假设右键菜单已经渲染完成，可以获取到准确的尺寸）
    const menuWidth = context.$el.offsetWidth;
    const menuHeight = context.$el.offsetHeight;
    // 判断右键菜单是否超出页面右侧边界，如果超出则将其左侧位置调整为边界内
    if (x + menuWidth > pageWidth) {
      x = pageWidth - menuWidth;
    }

    // 判断右键菜单是否超出页面底部边界，如果超出则将其顶部位置往上调整
    if (y + menuHeight > pageHeight) {
      y = Math.max(0, y - menuHeight);
    }

    context.$el.style.left = x + "px";
    context.$el.style.top = y + "px";
  });
};


const elCardRefTool= ref(null);
const isDOM = (e)=>{
      e.preventDefault();
      const target = e.target;
      var isUnderTopElement = elCardRefTool.value.$el.contains(target)
        if (!isUnderTopElement) {
          menuFlag.value = false;
        }
}
const wClick = (e)=>{
     const target = e.target;
        const toolA = contextMenuRef.value.$el;
        const isInsideTool = toolA && toolA.contains(target);
        if (!isInsideTool) {
            menuFlag.value = false;
        }
}
onMounted(() => {
    window.addEventListener("click",wClick);
      // 监听整个窗口的右键点击事件
    window.addEventListener('contextmenu', isDOM);
});
onUnmounted(() => {
     window.removeEventListener("click",wClick);
      window.removeEventListener('contextmenu', isDOM);
})
</script>


<style lang="scss" scoped>
.column-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-header{
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
  height: 100%;
}
.server-list {
  height: calc(100% - 30px);
  flex: 1;
  overflow: auto;
}
.tool-header{
    padding-bottom: 1px;
    border-bottom:1px solid var(--el-card-border-color) ;
  padding: 3px 10px;
    box-sizing: border-box;
}
.server-list {
  height: calc(100% - 34px);
  flex: 1;
  overflow: auto;
  padding: 5px;
  box-sizing: border-box;
}
:deep(.el-card__header) {
  padding: 5px !important;
  max-height: 30px !important;
  min-height: 30px !important;
}
:deep(.el-card__body) {
  height: calc(100% - 40px);
  flex: 1;
  overflow: auto;
  padding: 0 !important;
}
.iconfont {
  width: 24px;
  height: 24px;
  font-size: 24px;
  cursor: pointer;
}
:deep(.el-tabs__header){
    margin: 0 !important;
}
:deep(.el-tabs__content){
  padding:0 10px;
}
</style>